<template>
	<view class="container">
		<uni-search-bar @confirm="search" v-model="inputValue" placeholder="请输入搜索条件" :radius="100"></uni-search-bar>
		<view>
			<hxd-record v-for="(item,index) in dataList" :key="index" :item="item" :id="item.id" @modify="modify(index)" />
		</view>
		<view class="loading">{{loadingTxt}}</view>
		<uni-popup ref="popup" type="bottom" :maskClick="true" :animation="true">
			<uni-popup-rich :options="reasons" :options2="szlxs" :firstInput="current.je" :secondInput="current.remark" :date="current.rq"
			 :billtype="current.type" :szlx="current.szlx" :billid="current.id" @confirm="flushDataList"></uni-popup-rich>
			<view class="bottom"></view>
		</uni-popup>
		<view class="" @click="toAdd">
			<hxd-fab />
		</view>
	</view>
</template>

<script>
	import {
		getExpenses
	} from '@/common/api/bill.js'
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import hxdRecord from '@/components/hxd-record.vue'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniFab from '@/components/uni-fab/uni-fab.vue'
	import uniPopupRich from '@/components/uni-popup/uni-popup-rich.vue'
	import hxdFab from '@/components/hxd-fab.vue'
	import {
		dateUtils
	} from '@/common/util.js'
	let page = 1,
		timer = null;
	export default {
		computed: {
			current() {
				return this.dataList[this.currentIndex];
			}
		},
		components: {
			hxdRecord,
			uniPopup,
			uniFab,
			uniPopupRich,
			hxdFab
		},
		onReachBottom() {
			//阻止重复加载
			if (timer !== null) {
				clearTimeout(timer)
			}
			timer = setTimeout(() => this.searchMore(), 500)
		},
		onPullDownRefresh() {
			this.search();
		},
		onLoad() {
			this.search();
			this.$http.get('/bills/types').then(res => {
				this.reasons = res.data.data;
			});
			this.$http.get('/bills/szlx').then(res => {
				this.szlxs = res.data.data;
			});
		},
		data() {
			return {
				dataList: [{
					id: '1',
					rq: '2021-01-01',
					szlx: '支出',
					type: '未知',
					je: 0,
					remark: '加载中'
				}],
				currentIndex: 0,
				reasons: [],
				szlxs: [],
				inputValue: '',
				loadingTxt: '加载更多'
			}
		},
		methods: {
			search() {
				page = 1;
				uni.showNavigationBarLoading()
				this.$http.get('/bills/search?inputValue=' + this.inputValue.value + "&page=1").then(res => {
					this.dataList = res.data.data;
					uni.stopPullDownRefresh();
					uni.hideNavigationBarLoading()
					page++
				});
			},
			searchMore() {
				if (this.loadingTxt != '已经加载全部') {
					this.loadingTxt = '加载中'
					uni.showNavigationBarLoading()
					this.$http.get('/bills/search?inputValue=' + this.inputValue.value + "&page=" + page).then(res => {
						if (res.data.data.length == 0) {
							this.loadingTxt = "已经加载全部"
						} else {
							this.dataList = this.dataList.concat(res.data.data);
							this.loadingTxt = "加载更多"
							page++
						}
						uni.stopPullDownRefresh();
						uni.hideNavigationBarLoading()
					});
				}
			},
			getList() {
				getExpenses({
					user_id: this.user.user_id + ''
				}).then(res => {
					const {
						data,
						errCod,
						errMsg
					} = res.data;
					if (errCod === 0) {
						this.dataList = data;
					}
				})
			},
			modify(index) {
				this.currentIndex = index;
				this.$refs.popup.open();
			},
			toAdd() {
				let date = dateUtils.yyyymmdd();
				let reason = {
					reason: '餐饮'
				};
				const current = {
					rq: date,
					type: "餐饮",
					je: 0,
					remark: '',
					szlx: '支出'
				};
				this.dataList.push(current);
				this.currentIndex = this.dataList.length - 1;
				this.open()
			},
			flushDataList() {
				this.currentIndex = 0;
				this.search();
			},
			open() {
				this.$refs.popup.open();
			}
		}
	}
</script>

<style>
	.bottom {
		height: 100rpx;
	}

	.loading {
		line-height: 2em;
		text-align: center;
		color: #888;
		margin-top: 30rpx;
	}
</style>
